<template>
  <div class="box">
    <div class="list-view" ref="listView">
      <ul>
        <li
          v-for="group in singers"
          class="list-group"
          :key="group.id"
          ref="listGroup"
        >
          <h2 class="list-group-title" v-if="group.items.length > 0">
            {{ group.title }}
          </h2>
          <ul>
            <div v-if="group.items.length > 0">
              <li
                    v-for="item in group.items"
                    class="list-group-item"
                    :key="item.id"
                    @click='emitToParent(item.userName)'
                  >
                    <!-- <img src="item.avatar" class="avatar"> -->
                    <div
                      :style="{
                        background: '#99CCFF',
                        backgroundSize: '50px 50px',
                      }"
                      style="
                        text-align: center;
                        color: #fff;
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        background-repeat: no-repeat;
                      "
                    >
                      <div style="padding-top: 0.35rem">{{ item.LastWord }}</div>
                    </div>
                   <div style="flex:4;display:flex;flex-direction:column;">
                     <div style="flex:1">
                       <span class="name">{{ item.name }}</span>
                         <span class="name2" v-if="item.IsAccounted">开通</span>
                        <span class="name3"  v-if="!item.IsAccounted">未开通</span>
                        
                     </div>
                      <div style="flex:1"> 
                       <span class="name5">{{item.orgName}}</span>
                      </div>
                      <div style="flex:1" v-if="item.roleNames.length > 0"> 
                        <span v-for="roleName in item.roleNames" class="name4" :key="roleName">{{roleName}}</span>
                       <!-- <span class="name4">顾问</span>
                       <span class="name4">单位管理员</span>
                       <span class="name4">部门负责人</span> -->
                      </div>
                   </div>
                  </li>
            </div>
          </ul>
          <div v-if="group.items.length > 0" style="padding-bottom: 30px"/>
        </li>
      </ul>
      <div class="list-shortcut">
        <ul>
          <li
            v-for="(item, index) in shortcutList"
            class="item"
            :data-index="index"
            :key="item.id"
            @touchstart="onShortcutStart"
            @touchmove.stop.prevent="onShortcutMove"
            :class="{ current: currentIndex === index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  props: {
    uData: {
      type: Array,
    },
  },
  data() {
    return {
      singers: [],
      scrollY: 0,
      currentIndex: 0,
    };
  },
  created() {
    if (this.uData && this.uData.length > 0) {
      this.singers = this.uData;
    }
    this.touch = {};
    // 初始化 better-scroll 必须要等 dom 加载完毕
    //setTimeout(() => {
    //  this._initSrcoll()
    //  this._calculateHeight()
    //}, 20)
  },
  methods: {
    _initSrcoll() {
      // console.log('didi')
      this.scroll = new BScroll(this.$refs.listView, {
        probeType: 3,
        click: true,
      });

      this.scroll.on("scroll", (pos) => {
        this.scrollY = pos.y;
      });
    },
    onShortcutStart(e) {
      // 获取到绑定的 index
      let index = e.target.getAttribute("data-index");
      // 使用 better-scroll 的 scrollToElement 方法实现跳转
      this.scrollToElement(index);

      // 记录一下点击时候的 Y坐标 和 index
      let firstTouch = e.touches[0].pageY;
      this.touch.y1 = firstTouch;
      this.touch.anchorIndex = index;
    },
    onShortcutMove(e) {
      // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
      let touchMove = e.touches[0].pageY;
      this.touch.y2 = touchMove;
      // 这里的 16.7 是索引元素的高度
      let delta = Math.floor((this.touch.y2 - this.touch.y1) / 16.7);

      // 计算最后的位置
      // * 1 是因为 this.touch.anchorIndex 是字符串，用 * 1 偷懒的转化一下
      let index = this.touch.anchorIndex * 1 + delta;
      this.scrollToElement(index);
    },
    scrollToElement(index) {
      // 处理边界情况
      // 因为 index 通过滑动距离计算出来的
      // 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
      if (index < 0) {
        return;
      } else if (index > this.listHeight.length - 2) {
        index = this.listHeight.length - 2;
      }
      // listHeight 是正的， 所以加个 -
      this.scrollY = -this.listHeight[index];
      this.scroll.scrollToElement(this.$refs.listGroup[index]);
    },
    _calculateHeight() {
      this.listHeight = [];
      const list = this.$refs.listGroup;
      if (list) {
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }
    },
    emitToParent(userName){
      this.$emit("childEmit", {UserName:userName});
    },
  },
  watch: {
    scrollY(newVal) {
      // 向下滑动的时候 newVal 是一个负数，所以当 newVal > 0 时，currentIndex 直接为 0
      if (newVal > 0) {
        this.currentIndex = 0;
        return;
      }

      // 计算 currentIndex 的值
      for (let i = 0; i < this.listHeight.length - 1; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];

        if (-newVal >= height1 && -newVal < height2) {
          this.currentIndex = i;
          return;
        }
      }

      // 当超 -newVal > 最后一个高度的时候
      // 因为 this.listHeight 有头尾，所以需要 - 2
      this.currentIndex = this.listHeight.length - 2;
    },
    uData() {
      if (this.uData && this.uData.length > 0) {
        this.singers = this.uData;
        this.$nextTick(function () {
          this._initSrcoll();
          this._calculateHeight();
        });
      }
    },
  },
  computed: {
    shortcutList() {
      return ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
      // var aa = this.singers.map((group) => {
      //   return group.title.substr(0, 1);
      // });
      // return aa;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  width: 100%;
  height: 100%;
}
.list-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e8f1f8;
  .list-group {
    // padding-bottom: 30px;
    .list-group-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: #fff;
      background: #999;
    }
    .list-group-item {
      display: flex;
      align-items: center;
      padding: 20px 0 0 30px;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 5%;
      }
      .name {
        margin-left: 20px;
        color: black;
        font-size: 18px;
        // font-weight: 500;
      }
      .name2 {
        border-radius: 0.09rem;
        padding-top: 0.05rem;
        padding-left: 5px;
        padding-right: 5px;
        height: 15px;
        text-align: center;
        background:  #fcd8bd;
        margin-left: 20px;
        color: #fe7f1f;
        font-size: 6px;
        // font-weight: 500;
      }
      .name3 {
        border-radius: 0.09rem;
        padding-top: 0.05rem;
        padding-left: 5px;
        padding-right: 5px;
        height: 15px;
        text-align: center;
        background:  #999;
        margin-left: 20px;
        color: #666;
        font-size: 6px;
        // font-weight: 500;
      }
      .name4 {
        border-radius: 0.09rem;
        padding-top: 0.05rem;
        padding-left: 5px;
        padding-right: 5px;
        height: 15px;
        text-align: center;
        background:  #b4f3fd;
        margin-left: 20px;
        color: #0798ea;
        font-size: 6px;
        // font-weight: 500;
      }
      .name5 {
        border-radius: 0.09rem;
        padding-top: 0.05rem;
        height: 15px;
        text-align: center;
        margin-left: 20px;
        color: #666;
        font-size: 6px;
        // font-weight: 500;
      }
    }
  }
  .list-shortcut {
    position: absolute;
    z-index: 30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: rgba(167, 167, 167, 0.5);
    font-family: Helvetica;
    .item {
      padding: 3px;
      line-height: 1;
      color: black;
      font-size: 11px;
      &.current {
        color: #c20c0c;
        // font-weight: bold;
      }
    }
  }
}
</style>
